<template>
	<view class="container">
		<view class="phone-area">
			<view class="iconfont icon">&#xe759;</view>
			<input type="text" value="" />
		</view>

		<view class="code-and-btn">
			<view class="code-area">
				<view class="iconfont icon">&#xe75b;</view>
				<input type="text" value="" />
			</view>

			<view class="get-code">
				<van-button custom-class="btn-big" @click="onGetCode" plain>获取验证码{{ countText }}</van-button>
			</view>
		</view>
		<view class="next-area">
			<van-button :color="primaryColor" custom-class="next-custom-class" :round="true" @click="onNext">下一步</van-button>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		data() {
			return {
				primaryColor:getApp().globalData.primaryColor,
				count: 0,

			};
		},
		methods: {
			onGetCode() {
				if (this.count > 0) return;
				//do req
				this.count = 60
				const _this = this;
				const timer = setInterval(function() {
					_this.count = _this.count - 1;
					if (this.count <= 0) {
						clearInterval(timer)
					}
				}, 1000)
			},
			async onNext(){
				//do req
				try{
					var data = await utils.req('/user/login', {userId:'1001',password:'123456'})
					uni.setStorageSync('userinfo', data)
					uni.switchTab({
						url: '../index/index'
					})
					// uni.navigateTo({
					// 	url:'../user-binding/user-binding'
					// })
				}catch(e){
					console.log(e)
				}
				
			}
		},
		computed: {
			countText() {
				if (this.count <= 0) {
					return ''
				} else {
					return `(${this.count})`
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.container {
		padding: 200rpx 50rpx 0rpx 50rpx;
	}

	.icon {
		color: #a6a6a6;
		font-size: 1.4em;
		margin-right: 10rpx;
	}

	.phone-area {
		display: flex;
		align-items: center;
		border: 1px solid $uni-border-color;
		border-radius: 2px;
		padding: 7px;

		input {
			flex: 1
		}
	}

	.code-and-btn {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.code-area {

		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid $uni-border-color;
		border-radius: 2px;
		padding: 7px;

		input {
			flex: 1
		}
	}

	.get-code {
		width: 500rpx;
		margin-left: 8px;

		.btn-big {
			width: 100%;
		}
	}
	
	.next-area {
		margin-top: 200rpx;
		.next-custom-class{
			width: 100%;
		}
	}

	
</style>
